<template>
  <div class="page">
    <div class="tool">
      <form action="#">
        <input type="text" placeholder="请输入关键字" @click="tosearch" />
        <span class="ss iconfont">&#xe638;</span>
      </form>
    </div>
    <div class="main">
      <div class="left">
        <ul>
          <li v-for="(item,index) in list" :key="item.id" @click="qie(index)">
            <a href="javascript:;">{{item.catename}}</a>
          </li>
        </ul>
      </div>
      <div class="aaa">
        <div class="right">
          <div class="div1" v-for="(item) in list" :key="item.id" ref="ref" @click="todetail(item.id)">
            <h2>{{item.catename}}</h2>
            <div class="tu">
              <a href="javascript:;" v-for="items in item.children" :key="items.id">
                <img :src="$pre+items.img" />
                <p>{{items.catename}}</p>
              </a>
            </div>
            <div v-if="!item.children">
              <h3>暂无数据</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reqgetCates } from "../../http/api";
export default {
  data() {
    return {
      list: [],
      num: 0,
    };
  },
  methods: {
    qie(index) {
      this.n = index;
      // console.log(this.$refs.ref[index]);
      this.$refs.ref[this.n].scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "nearest",
      });
    },
    tosearch() {
      this.$router.push("/search");
    },
     todetail(id){
      // console.log(this.goodsList[index].id);
      this.$router.push('/detail/'+id)
    }
  },
  mounted() {
    reqgetCates().then((res) => {
      // console.log(res);
      this.list = res.data.list;
      // console.log(this.list);
    });
  },
};
</script>

<style scoped>
.page {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
}
.tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.89rem;
  padding: 0.59rem 0.12rem 0.3rem 0.34rem;
  background: #ff6040;
  position: fixed;
  width: 100vw;
}
.tool .back {
  font-size: 0.35rem;
  color: #ffdfd8;
}
.tool p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: 0.4rem "微软雅黑";
  color: #ffdfd8;
}
.tool .menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 1.72rem;
  height: 0.63rem;
  border: 1px solid #ff866c;
  border-radius: 0.3rem;
}
.tool .menu .line {
  height: 0.37rem;
  width: 1px;
  background: #ff896e;
}
.tool .menu em {
  font-size: 00.35rem;
  color: #ffdfd8;
}
.jiao {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1.17rem;
  border-top: 1px solid #cccccc;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.jiao a {
  display: block;
  text-align: center;
}
.jiao a:first-child p {
  color: #ff6040;
}
.jiao a img {
  height: 0.4rem;
  width: auto;
}
.jiao p {
  font: 0.2rem/0.49rem "微软雅黑";
  color: #9b9b9b;
}
.header {
  background-image: linear-gradient(180deg, #ff6040, #ff7b68);
}
form {
  position: relative;
}
form input {
  width: 6.5rem;
  height: 0.7rem;
  border: 0.02rem solid #e6e6e6;
  background: #ffffff;
  text-indent: 0.67rem;
  border-radius: 0.05rem;
  font: 0.27rem/0.6rem "微软雅黑";
  color: #999999;
}
form .ss {
  position: absolute;
  left: 0.14rem;
  top: 0.15rem;
  color: #9a9a9a;
}
.page {
  background-color: #f2f2f2;
}
.header {
  padding: 0.2rem 0.2rem 0.17rem;
}
.header form input {
  width: 100%;
  box-sizing: border-box;
}
.main {
  display: flex;
}
.main .left{
  position: fixed;
  top: 2.55rem;

}
.main .left ul {
  padding-bottom: 5rem;
  width: 2rem;
  background-color: white;
}
.main .left ul li {
  text-align: center;
}
.main .left ul li:hover a {
  color: #ff6040;
  font-weight: bold;
}
.main .left ul li a {
  font: 0.27rem/0.9rem "微软雅黑";
  color: #b2b2b2;
}
.main .aaa .right{
  margin-top: 2rem;
  margin-left: 2rem;
}
.main .aaa .right .div1 {
  width: 4.64rem;
  margin: 0.3rem 0.2rem 0.3rem 0.3rem;
  background-color: white;
}
.main .aaa .right .div1 h2 {
  font: bold 0.33rem/0.72rem "微软雅黑";
  margin-left: 0.2rem;
}
.main .aaa .right .div1 .tu {
  display: flex;
  flex-wrap: wrap;
}
.main .aaa .right .div1 .tu a {
  width: 80px;
  height: 120px;
  overflow: hidden;

  margin-top: 0.22rem;
}
.main .aaa .right .div1 .tu a img {
  width: 1.28rem;
  height: 1.28rem;
  margin-left: 0.2rem;
}
.main .aaa .right .div1 .tu a p {
  font: 0.23rem "微软雅黑";
  color: #999999;
  text-align: center;
}
.main .aaa .center .div1 {
  width: 4.64rem;
  height: 4.36rem;
  margin: 0.3rem 0.2rem 0.3rem 0.3rem;
  background-color: white;
}
.main .aaa .center .div1 h2 {
  font: bold 0.33rem/0.72rem "微软雅黑";
  margin-left: 0.2rem;
}
.main .aaa .center .div1 .tu {
  display: flex;
  flex-wrap: wrap;
}
.main .aaa .center .div1 .tu a {
  margin-top: 0.22rem;
}
.main .aaa .center .div1 .tu a img {
  width: 1.28rem;
  height: auto;
  margin-left: 0.2rem;
}
.main .aaa .center .div1 .tu a p {
  font: 0.23rem "微软雅黑";
  color: #999999;
  text-align: center;
}
</style>